<!DOCTYPE html>
 <html lang=en> 
<head>
<title>装箱单</title>  
<link type="text/css" rel="stylesheet" href="/static/bootstrap-3.3.6-dist/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="/static/bootstrap-3.3.6-dist/css/bootstrap-theme.css" />
    <style>
        button{margin: 5px 5px 5px 5px}
    </style>
<script type="text/javascript"  src="/static/jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script>
<script type="text/javascript"  src="/static/bootstrap-3.3.6-dist/js/bootstrap.js"></script>
<link type="text/css" rel="stylesheet" href="/static/jquery-ui-1.11.4.custom/jquery-ui.min.css" />
<script type="text/javascript" src="/static/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
<script type="text/javascript" charset="utf-8">
    $(function () {
        console.log("document ready");
        var csrf_token = "{{ csrf_token }}";
        var addnum = 0;
        var cache = {};
        $("#new_item1").autocomplete({
                minLength: 1
                , focus: function (event, ui) {
                    //$( "#new_item1" ).val( ui.item.value);
                    return false;
                }
                , select: function (event, ui) {
                    $("#new_item1").val(ui.item.name);
                    $("#id_item1").val(ui.item.id);
                    $("#input_gg").val(ui.item.guige);
                    return false;
                }
                , source: function (request, response) {
                    console.log(request);
                    var term = request.term;
                    request={ query: term };
                    if (term in cache) {
                        data = cache[term];
                        response(data.data);
                        return;
                    }
                    $.getJSON("/rest/Item", request, function (data, status, xhr) {
                        cache[term] = data;
                        response(data.data);
                    });
                }
            })
            .autocomplete("instance")._renderItem = function (ul, item) {
                return $("<li>")
                    .append("<a>" +item.name+"("+ item.guige+")" + "</a>")
                    .appendTo(ul);
            };

        function addrow(id, name,guige, ct) {
            console.log("add row");
            var newtodo = $("#table_input");
            var col1 = $("<td>");
            col1.attr("hidden", "true");
            var col11 = $("<td>");col11.attr("align","center");
            var col2 = $("<td>");
            var col3 = $("<td>");
            var col22 = $("<td>");
            var nm = "add_" + addnum;
            var p_nm = "p_" + addnum;
            var row_nm = "row_" + addnum;
            //var input1=$('<p>');
            col2.attr("id", p_nm);
            col2.attr("name", p_nm);
            var input2 = $('<input>');
            input2.attr("id", nm);
            input2.attr("name", nm);
            input2.attr("type", "hidden");
            var input3 = $("<button>");input3.attr("class","btn btn-sm")
            input3.append("移去");
            input3.attr("type", "button");
            var row = $("<tr>");
            row.attr("id", row_nm);
            input3.bind("click", {
                nm: row_nm
            }, button_remove_click);
            col1.append(input2);
            //col2.append(input1); 
            col3.append(input3);
            row.append(col1);

            row.append(col2);
            row.append(col22);col22.append(guige);
            row.append(col11);
            
            row.append(col3);

            newtodo.append(row);
            addnum++;
            $("#add_" + (addnum - 1)).val(id + ":" + ct);
            $("#p_" + (addnum - 1)).append(name);
            col11.append(ct)
        }

        function button_remove_click(event) {
            console.log("button_remove_click");
            var newtodo = $("#table_input");
            var nm = "#" + event.data.nm;
            console.log(nm);
            var toremove = $(nm);
            toremove.remove();
            //newtodo.removeChild(toremove);
        }

        function buttonaddrow_click() {
            //console.log("button_addrow clicked"); 
            var id = $("#id_item1");
            addrow(id.val(), $("#new_item1").val(),$("#input_gg").val(), $("#input_num").val());
        }

        $("#bt_add").click(buttonaddrow_click);
        //$("#setrow").click(buttonsetrow_click);  
        //$(".bt_houxuan").click(buttonhouxuan_click);
        //----------------------------------////////////////////////////////////////////////////////////////
        function button_select_click(event) {
            console.log("button_select clicked");
            console.log(event.data);
            var table = $("#item_input");
            console.log(table[0]);
            var cs = table[0].children;
            console.log(cs);
            cs = cs[0].children;
            data = {}
            for (var i = 0; i < cs.length; i++) {
                var input1 = cs[i].children[1].children[0];
                //console.log(cs[i].children[1].children[0].value);
                data[input1.name] = input1.value;
            }

            console.log(data);
            //$("#dialog").dialog("close");
            $.ajax({
                type: 'POST'
                , dataType: "json"
                , url: "/parts/create_item"
                , data: {
                    data: JSON.stringify(data)
                    , csrfmiddlewaretoken: csrf_token
                }
                , complete: function () {

                }
                , error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(errorThrown);
                }
                , success: function (data) {
                    console.log("ajax done");
                    console.log(data);
                    if (data.success) {
                        $("#id_item1").val(data.data.id);
                        $("#new_item1").val(data.data.name);
                        $("#input_gg").val(data.data.guige);
                        $("#dialog").dialog("close");
                    }
                }
            });
        }

        function showDialog(tochange) {
            var start = 0;
            var limit = 10;
            var todolist = $("#dialog");
            todolist.empty();
            var tbl = $('<table id="item_input">');
            var one = $('<tr>');
            var rowid = $('<td>编号</td>');
            var newEl = $('<td><input name="bh"></input></td>');
            one.append(rowid);
            one.append(newEl);
            tbl.append(one);
            var one = $('<tr>');
            var rowid = $('<td>名称</td>');
            var newEl = $('<td><input name="name"></input></td>');
            one.append(rowid);
            one.append(newEl);
            tbl.append(one);
            var one = $('<tr>');
            var rowid = $('<td>规格</td>');
            var newEl = $('<td><input name="guige"></input></td>');
            one.append(rowid);
            one.append(newEl);
            tbl.append(one);
            var one = $('<tr>');
            var rowid = $('<td>单位</td>');
            var newEl = $('<td><input name="danwei"></input></td>');
            one.append(rowid);
            one.append(newEl);
            tbl.append(one);
            todolist.append(tbl);
            var btn_select = $('<td><button type="button">确定</button></td>');
            todolist.append(btn_select);
            btn_select.bind("click", {}, button_select_click);
            $("#dialog").dialog({
                modal: true
                , overlay: {
                    backgroundColor: '#000'
                    , opacity: 0.5
                }
                , autoOpen: true
                , // buttons: {
                //     Cancel: function() {
                //         $(this).dialog('close');
                //     },
                // }
            });
        }

        function buttonfrom_click(event) {
            console.log("buttonfrom clicked");
            showDialog("namefrom");

        }

        function buttonto_click(event) {
            console.log("buttonto clicked");
            showDialog("nameto");
            // console.log(event.data);  
            // console.log(event.data.row);  
            // event.data.row.remove();  
            // rowid=event.data.rowid;  
            // todos[rowid]=undefined;//=todos.slice(rowid);  
        }

        function buttonnewitem_click(id, name) {
            console.log("button_newitem clicked");
            showDialog();
        }
        $("#bt_newitem").click(buttonnewitem_click);
    });
</script>
</head>
     <body>
<div>
    <form method="post" action="/parts/packItem/">{% csrf_token %}
    <input type="hidden" name="new" value="{{ new }}" />
    <table>
        <tr>
            <td> 包名称:</td>
            <td><input name="packname"   class="form-control"  value="{{ pack.name }}"></td>
        </tr>
        <tr>
        <td colspan="2" align="center">
        <input type="hidden" name="id" value="{{ pack.id }}" />
        <input type="hidden" name="url" value="{{ url }}" />
        <table id="table_input" class="table-bordered" style="margin:10px 5px 5px 5px">
            <tr>
                <td><h4>备件名称</h4></td>
                <td align="center">规格</td>
                <td align="center">数量</td>
                <td>删除</td>
            </tr>
            {% for packitem in pack.packitem_set.all %}
            <tr>
                <td><div style="width:180px">{{ packitem.item.name }}</div></td>
                <td align="center"> {{ packitem.item.guige }}</td>
                <td align="center"> {{ packitem.ct }}</td>
                <td align="center">
                    <input name="delete_{{ packitem.id }}" type="checkbox" align="center">
                </td>
            </tr>
            {% endfor %}
        </table>
        </td>
        </tr>
    </table>
        <table >
            <tr>
                <td>
                    <label>名称:</label>
                </td>
                <td>
                    <input id="id_item1" type="hidden">
                    <input id="new_item1" class="form-control" type="text" placeholder="输入备件名称"> <button class="btn" id="bt_newitem" type="button">新备件</button>
                </td>
                 <td>
                    
                </td>
            </tr>
             <tr>
                <td>
                    <label>规格:</label>
                </td>
                <td>
                    <input id="input_gg"  class="form-control" type="text">
                </td>
                <td align="right">
                   <!--  <button class="btn" id="bt_newitem" type="button">新备件</button> -->
                </td>
            </tr>
            <tr>
                <td>
                    <label>数量:</label>
                </td>
                <td>
                    <input id="input_num"  class="form-control" type="text" value="1">
                </td>
                <td align="right">
                    <button class="btn btn-info"  id="bt_add" type="button">增加</button>
                </td>
            </tr>
          <!--   <tr>
                <td>
                    <button class="btn btn-info"  id="bt_add" type="button">增加</button>
                </td>
                <td align="right">
                    <button class="btn" id="bt_newitem" type="button">增加新备件</button>
                </td>
            </tr> -->
        </table>
        <!--       -->
        <button class="btn btn-primary" type="submit">保存</button>
    </form>
</div>
<div id="dialog"></div>
</body>